// file：数据字典 , author: jianghainan, date: 2019-11-07

import React, { Component } from 'react'
import { DeleteOutlined, FileAddOutlined, FormOutlined, SearchOutlined } from '@ant-design/icons';
import '@ant-design/compatible/assets/index.css';
import { Form, Col, Row, Input, Button, Popconfirm, Select, message, } from 'antd';
import MyTable from '../../components/MyTable'
import BtnPermission from '../../components/BtnPermission'
import { dataBookApi } from '@/services/basic'

import EditItem from './EditItem'
import '../../layouts/queryList.css'
// import './style.css'
const InputGroup = Input.Group;
const Option = Select.Option;

class DataBook extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],//data包含了总页数、当前页、页面显示条数等
            records: [],//records对应列表上的每条数据
            handlers: {
                create: 'create',
                view: 'view',
                update: 'update',
                setDl: 'setDl',
                setIndex: 'setIndex',
            },//定义操作类型
        }
    }

    //组件挂载后为列表请求数据
    componentDidMount = () => {
        this.queryData();
    }

    //页码变化的时候，请求数据
    onChange = (pagination) => {
        this.queryData(pagination);
    }

    //增、改一条数据后刷新列表
    editItemDone = () => {
        this.queryData();
    }

    //增查改、设置操作类型，并传入对应行数据
    setHandler = (handler, record) => {
        this.EditItemRef.showModal(handler, record);
    }

    //删除一条数据后刷新列表
    deleteItem = (id) => {
        dataBookApi.delete(id).then(res => {
                if (res.code === '1') {
                    message.success(res.msg)
                    this.queryData()
                }
                message.warning(res.msg)
            })
    }

    //查找框查找数据
    queryData = (pagination = undefined) => {
        let formData = this.form.getFieldsValue();
        dataBookApi.getPage({ formData, pagination, })
            .then(res => {
                res.records.forEach(v => v.zt === '0' ? v.ztbzmc = "停用" : v.ztbzmc= "启用")
                this.setState({ data: res, records: res.records })
            })
    }


    render() {
        const { create, update } = this.state.handlers

        const columns = [
            { title: '字典名称', dataIndex: 'sjmc' },
            { title: '字典代码', dataIndex: 'zddm' },
            { title: '状态', dataIndex: 'ztbzmc' },
            {
                title: '操作',
                key: 'action',
                fixed: 'right',
                width: 100,
                render: (text, record) => (
                    <span className='handleButton'>
                        {/* 以下分别对应：改、删、等操作 */}
                        {
                            this.props.permission.edit ?
                                <FormOutlined
                                    title='修改'
                                    onClick={() => this.setHandler(update, record)}
                                    className='update-button' />
                            : ""
                        }
                        {
                            this.props.permission.delete ?
                                <Popconfirm title="确认删除?" onConfirm={() => this.deleteItem(record.id)}>
                                    <DeleteOutlined title='删除' className='delete-button' />
                                </Popconfirm>
                            : ""
                        }
                    </span>
                ),
            },
        ]

        //从state中获取data
        const { data, records } = this.state
        return (
            <div className='queryList'>
                <Form autoComplete='off' ref={form => this.form = form} layout="inline">

                    <InputGroup className='input-group'>
                        <Row gutter={24}>
                            <Col span={6}>
                                <Form.Item label='字典代码'
                                    name="sjbm"
                                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                                >
                                        <Input allowClear placeholder='请输入' />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label='字典名称'
                                    name="sjmc"
                                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                                >
                                        <Input allowClear placeholder='请输入' />
                                </Form.Item>
                            </Col>
                            <Col span={4}>
                                <Form.Item label='状态'
                                    name="zt"
                                    rules={[]}
                                    initialValue="1"
                                >
                                        <Select allowClear placeholder='请选择' >
                                            <Option value='0'>无效</Option>
                                            <Option value='1'>有效</Option>
                                            <Option value=''>全部</Option>
                                        </Select>
                                </Form.Item>
                            </Col>
                            <Col span={2}>
                                <Button onClick={(e) => this.queryData(e)} icon={<SearchOutlined />} className='search-button'>查询</Button>
                            </Col>
                            {
                                this.props.permission.add ?
                                    <Col span={2}>
                                        <Button icon={<FileAddOutlined />} className='addButton' onClick={() => this.setHandler(create)}>新增</Button>
                                    </Col>
                                : ''
                            }
                        </Row>
                    </InputGroup>
                </Form>
                <div>
                    <EditItem ref={(EditItemRef) => this.EditItemRef = EditItemRef} editItemDone={this.editItemDone} />
                </div>
                <MyTable props={{ columns, dataSource: records, data, setHandler: this.setHandler, onChange: this.onChange, permission: this.props.permission }} />
            </div>
        );
    }
}
export default BtnPermission(DataBook)